$(function () {

  // 统计未完成事项数量
  function todoCount() {
    let allTodos = $('#todoList .toggle').length;
    let completeTodos = $('#todoList input:checked').length;
    // 计算未完成的事项
    $('.todo-count strong').text(allTodos - completeTodos);
  }

  todoCount();

  // 新增待办事项
  $('#addTodo').on('keypress', function (ev) {
    // 获取表单中输入的文本
    let text = $(this).val();

    // 1. 检测用户是否按下 enter 键
    if(ev.keyCode !== 13 || text === '') return;

    // 2. 获取待办事项模板
    let todoTpl = $('#todoTemplate').html();

    // 3. 将 html 字符串转换为 jQuery 对象，然后 DOM 操作
    let todo = $(todoTpl)
                .find('label').text(text).end()
                .find('.edit').val(text).end();

    // 4. 将新的待办事项添加进列表中
    $('#todoList').append(todo);

    // 5. 清空输入框文本
    $(this).val('');

    // 6. 重新计算未完成的事项
    todoCount();
  })

  // 标记已完成事项
  $('#todoList').on('change', '.toggle', function () {
    // 1. 标记状态
    $(this).parents('li').toggleClass('completed');

    // 2. 重新计算未完成的事项
    todoCount();
  })

  // 全选/反选
  $('#toggleAll').change(function () {
    // 标记完成状态
    $('#todoList li').toggleClass('completed');

    // 标记是否选中状态
    $('#todoList .toggle').each(function () {
      $(this)[0].checked = !$(this)[0].checked;
    })

    // 重新计算未完成的事项
    todoCount();
  })

  // 删除待办事项
  $('#todoList').on('click', '.destroy', function () {
    // 查找要删除的节点，添加动画交互
    $(this).parents('li').fadeOut(function () {
      // 删除节点
      $(this).remove();

      // 重新计算未完成的事项
      todoCount();
    })
  })

  // 编辑待办事项
  $('#todoList').on('dblclick', 'label', function () {
    // 更新为编辑状态
    $(this).parents('li').addClass('editing').find('.edit')[0].focus();
  })

  // 更新待办事项
  $('#todoList').on('blur', '.edit', function () {
    let parents = $(this).parents('li');
    parents.removeClass('editing').find('label').text($(this).val());
  })
})

